<template>
  <div class="vote-search">
    <div class="vote-search-input">
      <input type="text" id="vote-search-text" placeholder="搜昵称" v-model="searchText">
      <i class="iconfont icon-sousuo"></i>
      <i class="iconfont icon-qingkong cancel" v-show="showCancel"></i>
      <div class="content">
        <div class="one">大王您只能为一位用户投出宝贵的一票</div>
        <div class="two">这票将决定他的人气，珍惜哦~</div>
      </div>
    </div>
    <table class="table players">
      <thead>
      <tr>
        <td>序号</td>
        <td>参赛人</td>
        <td>人气</td>
        <td v-if="gameStep < 4">操作</td>
      </tr>
      </thead>
    </table>
    <table class="players table">
      <tbody class="playersList">
      <tr v-for="(item,index) in players">
        <td class="one">
          <i class="iconfont icon-paiming1" v-if="index == 0"></i>
          <i class="iconfont icon-paiming2" v-else-if="index == 1"></i>
          <i class="iconfont icon-paiming3" v-else-if="index == 2"></i>
          <span v-else>{{index+1}}</span>
        </td>
        <td class="two" :data-cid="item.USER_CODE" @click.stop.prevent="gameOtherDetail(item)">
          <img :src="item.USER_HEAD" class="userhead">
        </td>
        <td class="three" :data-cid="item.USER_CODE" @click.stop.prevent="gameOtherDetail(item)">
          <div class="nickname">{{item.NICKNAME}}</div>
        </td>
        <td class="four popularNum" :data-cid="item.USER_CODE">{{item.POPULAR_NUM}}</td>
        <td class="five" v-if="gameStep <4" @click.stop.prevent="vote(item)">
          <div :class="item.VOTEFLAG==0?'notVoted':'hasVoted'" class="vote-btn notVoted" :data-cid="item.USER_CODE">
            {{item.VOTEFLAG==0?'投票':'已投票'}}
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import GameNotStartModal from 'components/modal/GameNotStartModal'
  import SubscribeModal from 'components/modal/SubscribeModal'
  import _ from 'underscore'

  export default {
    data(){
      return {
        lastVal: '',
        showCancel: false,
        players: [],
        pageSize: 10,
        pageNo: 1,
        searchText: ''
      }
    },
    props: {
      gameId: {
        type: String
      },
      gameStep: {
        type: String
      },
      gameName:{
        type: String
      },
      userCode: {
        type: String
      },
      identity: {
        type: String
      }
    },
    components: {
      'game-not-start-modal': GameNotStartModal,
      'subscribe-modal': SubscribeModal
    },
    watch: {
      searchText: 'inputEvent'
    },
    methods: {
      inputEvent(){
        var self = this;
        if (CommonUtil.sizeOfStr(self.searchText) >= 128) {
          self.searchText = self.lastVal;
        }
        var val = self.searchText;
        self.lastVal = val;
        //取消按钮显隐
        if (val != "" && !self.showCancel) {
          self.showCancel = true;
        } else if (val == "" && self.showCancel) {
          self.players = [];
          self.showCancel = false;
        }

        if (val.length > 0) {//输入框输入1个字符串时再查询
          var params = {
            userCode: self.userCode,
            businType: '3',
            keyWord: val,
            pageSize: self.pageSize,
            pageNo: self.pageNo,
            topicId: self.gameId
          };
//          self.players = [{"USER_CODE":"280177","VOTEFLAG":"0","POPULAR_NUM":"5","USER_HEAD":"http://dl.app.gtja.com/pictures/nrngimg/niurenimg/11010261.jpg","NICKNAME":"臭小子字数字数","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"7989729","VOTEFLAG":"0","POPULAR_NUM":"3","USER_HEAD":"http://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"赵英宇","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"5145513","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"家语ok","SUBSCRIBE_PIRCE":"0"},
//            {"USER_CODE":"7825369","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"大宝妹007","SUBSCRIBE_PIRCE":"0"}];
          // $(self._sel+" .content").append(JSON.stringify(params)+'<br>----<br>');
          //全文检索
          RemoteDAO.callUC12008310(params, function (response) {
            var list = response.body;
            self.searchHeadNick(list);//批量查询用户最新的头像和昵称 并打印
          });
        }
      },
      /**
       *  批量查询用户最新的头像和昵称 并打印
       */
      searchHeadNick(list){
        var self = this;
        var array = [];
        for (var i = 0; i < list.length; i++) {
          array.push(list[i].USER_CODE);
        }
        var userCodes = array.join(",")
        //批量查询用户
        RemoteDAO.callUC12008316(self.userCode, userCodes, function (resp) {
          if (resp.error == "0") {
            var body = resp.data.body || [];
            //对批量查询的结果进行匹配赋值，因为批量查询接口是无序的
            for (var k = 0; k < list.length; k++) {
              list[k].SUBSCRIBE_PRICE = '0';
              list[k].NICKNAME = list[k].NICKNAME || "--";
              list[k].USER_HEAD = list[k].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
              for (var i = 0; i < body.length; i++) {
                if (list[k].USER_CODE == body[i].USER_CODE) {
                  list[k].SUBSCRIBE_PRICE = CommonUtil.toFixed(body[i].SUBSCRIBE_PRICE, 0) || '0';
                  list[k].NICKNAME = body[i].NICKNAME || list[k].NICKNAME;
                  list[k].USER_HEAD = body[i].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
                  break;
                }
              }
            }
            self.players = self.players.concat(list);
          } else {
            self.$store.dispatch('setTip', {text: resp.data});
          }
        });
      },
      vote(item){
        var self = this;
        var clientId = item.USER_CODE;
        var args = {
          userCode: self.userCode,
          actionType: '00',
          businType: '',
          communityType: '6',
          relationUserCode: clientId,
          relationUserName: '',
          objectType: '1',
          beginDate: '',
          endDate: '',
          communityContent: '',
          topicCode: self.gameId,
          topicName: '',
          serialNo: ''
        };
        //投票接口
        RemoteDAO.callUC12008306(args, function (resp) {
          if (Number(resp.error) == 0) {
            self.$store.dispatch('setTip', {text: "投票成功"});
            item.POPULAR_NUM = Number(item.POPULAR_NUM) + 1;
            item.VOTEFLAG = 1;
            var voteNum = "voteNum_"+clientId;
            var voteBtn = "voteBtn_"+clientId;
            document.getElementById(voteNum).innerHTML = item.POPULAR_NUM;
            document.getElementById(voteBtn).innerHTML = '已投票';
            document.getElementById(voteBtn).className = 'vote-btn hasVoted';
          } else {
            self.$store.dispatch('setTip', {text: resp.data});
          }
        });
      },
      gameOtherDetail(item){
        var self = this;
        var clientId = item.USER_CODE;
        if (!_.contains(["3", "4"], self.gameStep)) {// 非  比赛中、比赛已结束，弹出弹窗
          self.$store.dispatch('setModal', {visible: true, modalId: 'gameNotStartModal'});
        } else if(self.gameStep == '4'){
          self.$store.dispatch('setTip', {text: "比赛已结束，仅展示排名"});
        } else if (clientId == self.userCode) { // 查看自己
          self.$router.push({
            path: '/game/gameselfdetail',
            query: {gameId: self.gameId, gameName: self.gameName, userCode: clientId, identity: self.identity}
          });
        } else {
          // 判断是否已订阅
          RemoteDAO.callUC12008309(self.userCode, "1", "1", "3", "1", "1", "", clientId, "0", function (response) {
            if (response.error == "0") {
              if (response.data.body.length > 0) { // 已订阅
                self.$router.push({
                  path: '/game/gameotherdetail',
                  query: {gameId: self.gameId, gameName: self.gameName, userCode: clientId, identity: self.identity}
                });
              } else { // 未订阅，弹出订阅弹窗
                self.$store.dispatch('setModal', {
                  visible: true,
                  modalId: 'subscribeModal',
                  relationUserCode: clientId,
                  callback: null
                });
              }
            } else {
              self.$store.dispatch('setTip', {text: response.data});
            }
          });
        }
      }
    }
  }

</script>

<style lang="css" scoped>

</style>
